<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发送http请求</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<body ng-app="app">
       <div class="container" ng-controller="demoCtrl">
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="item in data track by $index">
                    {{$index}}--{{item.brand}}--{{item.country}}
                </li>    
            </ul>
            <pre>
                <!-- 必须和pre标签结合使用，否则看不到效果 -->
                <!-- json:缩进的空格数量 -->
            {{response|json : 4}}
            </pre>
            <button class="btn btn-primary" ng-click="getData()">请求数据</button>  
       </div> 
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script> 
<script>
    var app=angular.module('app',[]);
    app.controller('demoCtrl',['$scope','$http',function($scope,$http){
        $scope.data=[];
        $scope.myJson = {a:{name:'小明',age:18},b:{name:'小红',age:20}}
        $scope.getData=function(){
            // $http({
            //     method:'GET',
            //     url:'mock-data/carlist.json'            //必须是严格格式的json字符串
            // }).then(function(response) {
            //     $scope.status = response.status;
            //     $scope.data = response.data;
            //     console.log(response.data);
            //   });
            
            $http.get("mock-data/carList.json").then(function(response){
                $scope.data = response.data;
                $scope.response=response;
                // $scope.response=JSON.stringify(response,null,'  ');
            });
        }
    }]);
</script>
</html>